import React, { Component } from 'react'
import Form from './Form'
const ref = React.createRef()
export default class App extends Component {
  render() {
    return (
      <>
        {/* ref对象和标签绑定,拿到的是标签的真实dom */}
        {/* <h1 ref={ref}>app组件</h1> */}
        {/* ref的值如果是函数,当标签的真实dom创建成功之后,函数会被调用.真实dom会以实参的形式传入函数 */}
        <h1
          ref={(node) => {
            console.log(node)
          }}
        >
          app组件
        </h1>
        <hr />
        {/* ref对象只能和一个标签或组件绑定,否则会覆盖 */}
        {/* ref对象和类组件进行绑定,拿到的是类组件的实例 */}
        {/* ref对象不可以和函数组件进行绑定 */}
        {/* <Form ref={ref}></Form> */}
        {/*ref的值是函数,最终获取的node还是组件实例 */}
        <Form
          ref={(node) => {
            console.log(node)
          }}
        ></Form>
        <button
          onClick={() => {
            console.log(ref.current)
          }}
        >
          提交
        </button>
      </>
    )
  }
}
